<template>
	<view class="content">
		<view class="item" v-for="item, i in list " :key="i" @click="
			handleTabs(
				item.url
			)
			">
			<view class="left">
				<image :src="Domain_ICON + item.icon"></image>
			</view>
			<view class="right">
				<view class="title">{{ item.name }}</view>
				<view class="cont">{{ item.cont }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			Domain_ICON: app.globalData.Domain_ICON,
			list: [
				{
					name: "订单融资",
					cont: "企业凭借其购销合同和有生产能力、能提供有效担保的订单，向银行提出贷款申请。银行则根据企业的订单及合同，向企业提供贷款。企业在收到货款后，会立即偿还贷款。",
					icon: "/4.png",
					url: "/pages/LogisticsFinance/LogisticsFinance"
				},
				{
					name: "仓单质押",
					cont: "作为一种新型的服务项目，在传统仓储企业向现代物流企业转型的过程中得到广泛应用。增值服务仓单质押在国外已经成为企业与银行融通资金的重要手段，也是仓储业增值服务的重要组成部分。",
					icon: "/1.png",
					url: "/pages/LogisticsFinance/Warehouse_receipt_pledge"
				},
				{
					name: "保付代理",
					cont: "这种方式涉及到一个企业（卖方）将其现在或未来的基于其与另一个企业（买方）订立的货物销售/服务合同所产生的应收账款转让给保理商。",
					icon: "/3.png",
					url: "/pages/LogisticsFinance/Factoring"
				}
			]
		};
	},
	methods: {
		handleTabs(url) {
			uni.navigateTo({
				url,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	height: calc(100vh - 0px);
	padding: 20rpx;
	box-sizing: border-box;
	background-color: #f5f5f5;

	.item {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin: 0 0 30rpx 0;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			margin: 10rpx 0;
		}

		.cont {
			font-size: 24rpx;
		}
	}

	.left {
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.right {
		margin: 0 0 0 20rpx;
	}
}
</style>
